<template>
	<div class="pictureadsstyle">
		<el-form label-width="100px" :model="$currentproperties" size="small">
			<!-- 标题内容 -->
			<el-form-item label="选择模板" class="lef">
				<p style="color: #000">{{ styleText }}</p>
			</el-form-item>

			<!-- 轮播图选择 -->
			<div class="swiperType">
				<el-tooltip class="item" effect="dark" content="一行一个" placement="bottom">
					<span class="iconfont icon-yihangyige" style="font-size: 21px"
						:class="$currentproperties.swiperType === 0 ? 'active' : ''" @click="$currentproperties.swiperType = 0" />
				</el-tooltip>

				<el-tooltip class="item" effect="dark" content="轮播海报" placement="bottom">
					<span class="iconfont icon-icon_tupian_lunbohaibao" style="font-size: 20px"
						:class="$currentproperties.swiperType === 1 ? 'active' : ''" @click="$currentproperties.swiperType = 1" />
				</el-tooltip>

			</div>

			<!-- 下划线 -->
			<div class="bor" />

			<h5 style="color: #000; font-size: 12px">添加图片</h5>
			<p style="color: #969799; font-size: 12px; margin-top: 10px">
				拖动选中的导航可对其排序
			</p>

			<!-- 图片广告 -->
			<div v-if="$currentproperties.imageList[0]">
				<vuedraggable v-model="$currentproperties.imageList" v-bind="dragOptions">
					<transition-group>
						<section class="imgBanner" v-for="(item, index) in $currentproperties.imageList" :key="item + index">
							<i class="el-icon-circle-close" @click="deleteimg(index)" />
							<!-- 图片 -->
							<div class="imag">
								<img :src="item.src" alt draggable="false" />
							</div>
							<!-- 标题和链接 -->
							<div class="imgText">
								<el-input v-model="item.text" placeholder="请输入标题，也可不填" size="mini"></el-input>

								<!-- 选择类型 -->
								<div class="select-type">
									<el-select style="width: 60%" v-model="item.linktype" placeholder="请选择跳转类型"
										size="mini">
										<el-option v-for="item in optionsType" :key="item.name" :label="item.name"
											:value="item.type"></el-option>
									</el-select>

									<!-- 输入链接 -->
									<el-input style="width: 100%" size="mini" placeholder="请输入链接，输入前确保可以访问"
										v-model="item.http.externalLink"></el-input>
								</div>
							</div>
						</section>
					</transition-group>
				</vuedraggable>
			</div>
			<!-- 上传图片 -->
			<el-button @click="$refs.upload.showUpload()" class="uploadImg" type="primary" plain>
				<i class="el-icon-plus" />点击添加图片
			</el-button>

			<!-- 下划线 -->
			<div class="bor"></div>

			<el-form-item class="lef" label="一行个数" v-show="$currentproperties.swiperType === 2">
				<!-- 单选框 -->
				<el-radio-group v-model="$currentproperties.rowindividual" class="radi">
					<el-radio :label="2">2个</el-radio>
					<el-radio :label="3">3个</el-radio>
					<el-radio :label="4">4个</el-radio>
					<el-radio :label="5">5个</el-radio>
					<el-radio :label="6">6个</el-radio>
				</el-radio-group>
			</el-form-item>

			<div style="height: 10px" />

			<!-- 图片倒角 -->
			<!--      <el-form-item label="分页类型" class="lef borrediu">-->
			<!--        <el-radio-group v-model="$currentproperties.pagingType" class="radi1">-->
			<!--          <el-radio :label="0">不显示</el-radio>-->
			<!--          <el-radio label="bullets">样式一</el-radio>-->
			<!--          <el-radio label="fraction">样式二</el-radio>-->
			<!--          <el-radio label="progressbar">样式三</el-radio>-->
			<!--        </el-radio-group>-->
			<!--      </el-form-item>-->

			<div style="height: 10px" />

			<!--      $currentproperties.swiperType === 0-->
			<!-- 图片倒角 -->
			<el-form-item label="图片倒角" class="lef borrediu" v-show="$currentproperties.swiperType === 0">
				<el-slider v-model="$currentproperties.borderRadius" :max="30" input-size="mini" show-input></el-slider>
			</el-form-item>

			<div style="height: 10px" />

			<!-- 页面边距 -->
			<el-form-item class="lef" label="页面边距" v-show="$currentproperties.swiperType === 0">
				<el-slider v-model="$currentproperties.pageMargin" :max="20" input-size="mini" show-input></el-slider>
			</el-form-item>

			<div style="height: 10px" />

			<!-- 图片边距 -->
			<el-form-item class="lef" label="图片边距" v-show="$currentproperties.swiperType === 0 ">
				<el-slider v-model="$currentproperties.imageMargin" :max="20" input-size="mini" show-input></el-slider>
			</el-form-item>
			<!--      $currentproperties.swiperType === 1 -->
			<el-form-item class="lef" label="轮播间隔(ms)" v-show="$currentproperties.swiperType === 1">
				<el-slider v-model="$currentproperties.swiperItemProps.autoplay" :max="10000" input-size="mini"
					show-input></el-slider>
			</el-form-item>

			<el-form-item class="lef" label="动画时长(ms)" v-show="$currentproperties.swiperType === 1">
				<el-slider v-model="$currentproperties.swiperItemProps.duration" :max="10000" input-size="mini"
					show-input></el-slider>
			</el-form-item>

			<el-form-item class="lef" label="图片宽度" v-show="$currentproperties.swiperType === 1">
				<el-input v-model="$currentproperties.swiperItemProps.width" placeholder="请输入图片宽度,百分比（%）或像素（px），例如100%或375px"
					input-size="mini"></el-input>
			</el-form-item>

			<el-form-item class="lef" label="图片高度" v-show="$currentproperties.swiperType === 1">
				<el-input v-model="$currentproperties.swiperItemProps.height" placeholder="请输入图片高度,百分比（%）或像素（px），例如100%或375px"
					input-size="mini"></el-input>
			</el-form-item>

			<el-form-item class="lef" label="纵向滚动" v-show="$currentproperties.swiperType === 1">
				<el-switch v-model="$currentproperties.swiperItemProps.vertical"></el-switch>
			</el-form-item>

			<el-form-item class="lef" label="允许手势滑动" v-show="$currentproperties.swiperType === 1">
				<el-switch v-model="$currentproperties.swiperItemProps.touchable"></el-switch>
			</el-form-item>

			<el-form-item class="lef" label="显示指示器" v-show="$currentproperties.swiperType === 1">
				<el-switch v-model="$currentproperties.swiperItemProps.showIndicators"></el-switch>
			</el-form-item>

			<el-form-item class="lef" label="指示器颜色" v-show="$currentproperties.swiperType === 1">
				<!-- 颜色选择器 -->
				<el-color-picker v-model="$currentproperties.swiperItemProps.indicatorColor" show-alpha :predefine="predefineColors">
				</el-color-picker>
			</el-form-item>


		</el-form>

		<!-- 上传图片 -->
		<uploadimg ref="upload" @uploadInformation="uploadInformation" />
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	}
	from 'vuex'
	import vuedraggable from 'vuedraggable' //拖拽组件
	import uploadimg from '../../uploadImg' //图片上传

	export default {
		name: 'pictureadsstyle',
		components: {
			vuedraggable,
			uploadimg
		},
		props: {
			// datas: Object,
			// parentComponent: Object
		},
		computed: {
			...mapState(['$pageSchema', '$rightcom', '$leftcom', '$currentproperties', '$currentComponent']),
			styleText() {
				let data
				if (this.$currentproperties.swiperType === 0) data = '一行一个'
				if (this.$currentproperties.swiperType === 1) data = '轮播海报'
				if (this.$currentproperties.swiperType === 2) data = '多图单行'
				if (this.$currentproperties.swiperType === 3) data = '立体模式'
				if (this.$currentproperties.swiperType === 4) data = '导航横向滑动'
			
				return data
			},
		},
		data() {
			return {
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],
				optionsType: [{
						type: '10',
						name: '内部链接',
					},
					{
						type: '11',
						name: '外部链接',
					},
				], // 选择跳转类型
				dragOptions: {
					animation: 200,
				},
				emptyText: '',
			}
		},

		created() {
			console.info(this.$currentproperties)
		},

		methods: {

			// 提交
			uploadInformation(res) {
				this.$currentproperties.imageList.push({
					src: res,
					text: '',
					http: {},
				})
			},

			/* 删除图片 */
			deleteimg(index) {
				this.$currentproperties.imageList.splice(index, 1)
			},
		},

	}
</script>

<style scoped lang="less">
	.pictureadsstyle {

		/* 轮播图样式 */
		.swiperType {
			display: flex;
			justify-content: space-around;
			align-items: center;

			span {
				display: inline-block;
				width: 58px;
				height: 32px;
				text-align: center;
				line-height: 32px;
				background: #ebedf0;
				color: #979797;
				border: 1px solid #fff;
				cursor: pointer;
				transition: all 0.5s;

				&:hover {
					border: 1px solid #155bd4;
					color: #155bd4;
				}

				&.active {
					border: 1px solid #155bd4;
					background-color: #e0edff;
					color: #155bd4;
				}
			}
		}

		/* 圆角 */
		.borrediu {
			span {
				display: inline-block;
				width: 48px;
				height: 26px;
				text-align: center;
				line-height: 26px;
				background: #ebedf0;
				color: #979797;
				border: 1px solid #fff;
				cursor: pointer;
				transition: all 0.5s;

				&:hover {
					border: 1px solid #155bd4;
					color: #155bd4;
				}

				&.active {
					border: 1px solid #155bd4;
					background-color: #e0edff;
					color: #155bd4;
				}
			}
		}

		::v-deep .radi .el-radio {
			margin-right: 8px;
		}

		::v-deep .radi1 .el-radio {
			margin-right: 7px;

			.el-radio__label {
				padding-left: 5px;
			}
		}

		/* 上传图片按钮 */
		.uploadImg {
			width: 345px;
			height: 40px;
			margin-top: 20px;
		}

		// 上传弹框内容部分
		::v-deep .uploadIMG .el-dialog__body {
			height: 280px;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			justify-content: center;
		}

		.disable {
			::v-deep .el-upload {
				display: none !important;
			}
		}

		/* 图片广告列表 */
		.imgBanner {
			padding: 6px 12px;
			margin: 16px 7px;
			border-radius: 2px;
			background-color: #fff;
			box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
			display: flex;
			position: relative;

			/* 删除图标 */
			.el-icon-circle-close {
				position: absolute;
				right: -10px;
				top: -10px;
				cursor: pointer;
				font-size: 19px;
			}

			/* 图片 */
			.imag {
				width: 60px;
				height: 60px;
				border-radius: 5px;
				overflow: hidden;
				position: relative;
				cursor: pointer;

				img {
					width: 100%;
					height: 100%;
					display: inline-block;
				}

				span {
					background: rgba(0, 0, 0, 0.5);
					font-size: 12px;
					position: absolute;
					left: 0px;
					bottom: 0px;
					display: inline-block;
					width: 100%;
					text-align: center;
					color: #fff;
					height: 20px;
					line-height: 20px;
				}
			}

			/* 图片字 */
			.imgText {
				width: 80%;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				padding-left: 20px;
				justify-content: space-between;

				.select-type {
					display: flex;

					::v-deep .el-select {
						.el-input {
							input {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
	}
</style>